<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <script src="{{ url_for('static',path='/js/echarts.min.js') }}"></script>
    <style>
        /* 设置全局样式 */
        body {
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }

        .content {
            position: relative;
            width: 1440px;
            height: 800px;
            background-image: url('/static/img/冻梨果蔬商店背景.jpeg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            padding: 20px;
            margin: 20px auto;
            color: #fff;
            font-family: 'Arial', sans-serif;
        }

        .content ul {
            position: absolute;
            top: 200px;
            left: 1000px;
            padding: 0;
            list-style: none;
        }

        .content ul li {
            margin-bottom: 120px;
        }

        .content ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 30px;
            padding: 10px 20px;
            border: 2px solid #fff;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.3);
            transition: all 0.3s;
        }

        .content ul li a:hover {
            color: #ffcc00;
            background: rgba(0, 0, 0, 0.5);
            border-color: #ffcc00;
        }

        .container {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            background: linear-gradient(to right, #f0f8ff, #e6e6fa);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            max-height: 0; /* 初始隐藏 */
            overflow: hidden; /* 隐藏超出部分 */
            visibility: hidden; /* 完全隐藏 */
            opacity: 0; /* 完全隐藏 */
            transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
        }
        .container.expanded {
            max-height: 400px; /* 展开后的最大高度 */
            visibility: visible; /* 可见 */
            opacity: 1; /* 不透明 */
        }
        .toggle-button {
            opacity: 0; /* 完全透明 */
            position: absolute;
            top: 500px;
            left: 500px;
            cursor: pointer;
            padding: 10px;
            background-color: #2a9d8f;
            color: white;
            border: none;
            border-radius: 5px;
        }

        .classify_pic {
            width: 600px;
            height: 400px;
        }
        .description {
            max-width: 400px; /* 说明区域的最大宽度 */
            max-height: 400px; /* 说明区域的最大高度 */
            line-height: 4; /* 行高增加可读性 */
            font-family: Arial, sans-serif; /* 字体 */
            color: #333; /* 文字颜色 */
        }
        .description span {
            display: block;
            font-size: 18px; /* 字体大小 */
            font-weight: 400; /* 字体粗细 */
            line-height: 2.4; /* 行间距 */
        }

        .orange {
        position: absolute;
        top: 725px;
        left: 210px;
        opacity: 0;
        }

        .tomato {
        position: absolute;
        top: 600px;
        left: 360px;
        opacity: 0;
        }

        .pear {
        position: absolute;
        top: 600px;
        left: 240px;
        opacity: 0;
        }

        .onion {
        position: absolute;
        top: 725px;
        left: 350px;
        opacity: 0;
        }
        .Frozen_pear {
        position: absolute;
        font-size: 40px;
        top: 180px;
        left: 100px;
        opacity: 0;
        }
    </style>
</head>
<body>

    <div class="content">
        <button class="toggle-button" onclick="toggleContainer()">00000000</button>
        <a class = Frozen_pear href = "Frozen_pear.html">_____________Frozen_pear_____________</a>
        <a class = "orange" href="https://baike.baidu.com/item/%E7%94%9C%E6%A9%99/2307547?fromtitle=%E6%A9%99%E5%AD%90&fromid=237">____橙子____</a>
        <a class = "tomato" href="https://baike.baidu.com/item/%E7%95%AA%E8%8C%84/69104?fromtitle=%E8%A5%BF%E7%BA%A2%E6%9F%BF&fromid=216015">_____番茄_____</a>
        <a class = "pear" href="https://baike.baidu.com/item/%E6%A2%A8/11871">____梨____</a>
        <a class = "onion" href="https://baike.baidu.com/item/%E6%B4%8B%E8%91%B1/6409">____洋葱____</a>
        <ul>
            <li><a href="2020.html">2020年度冻梨果蔬商场数据</a></li>
            <li><a href="2020.html">2021年度冻梨果蔬商场数据</a></li>
            <li><a href="2020.html">2022年度冻梨果蔬商场数据</a></li>
        </ul>
    </div>


    <div class="container" id="myContainer">
        <div class="classify_pic" id="main" style="width: 600px; height: 400px;"></div>
        <div class="description">
            <span>• 常年性蔬菜：这些产品可以在不同的地区或国家生产, 几乎整年都可以获得。</span>
            <p></p>
            <span>• 季节性蔬菜：这些产品只在特定的季节内生长与销售。</span>
            <p></p>
            <span>• 时令性蔬菜：这些产品仅在某些特定的节日、假期、节气等短期时间销售。</span>
        </div>
    </div>

        <script>
            let value

            function echarts1(value){
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                  title: {
                    text: '商店内果蔬各类型占比',
                    subtext: '',
                    left: 'center'
                  },
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left'
                  },
                  series: [
                    {
                      name: 'Access From',
                      type: 'pie',
                      radius: '70%',
                      data: value,
                      emphasis: {
                        itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      }
                    }
                  ]
                };
                myChart.setOption(option);
            }

            fetch("/get_index_data",{ //相当于从本机服务器发起一个请求,所有host一致的
            // method:"post",
            // body:JSON.stringify({name:'小明'})
        }) //发起一个请求
        .then((response) => response.json())
        .then((data) => {
              //此时绘图
              console.log(data)
              echarts1(data)

      });
        </script>

        <script>
            function toggleContainer() {
                var container = document.getElementById('myContainer');
                if (container.classList.contains('expanded')) {
                    container.classList.remove('expanded');
                } else {
                    container.classList.add('expanded');
                    // 滚动到容器
                    container.scrollIntoView({ behavior: 'smooth' });
                }
            }
        </script>


</body>
</html>
